<template>
  <!-- 组件中只有一个弹窗 -->
  <el-dialog
      v-model="bomEditWinDialogVisible"
      title="修改产品BOM关系"
      width="50%"
      @close="handleClose"
  >
    <template #default>
      <el-form style="margin-top: 10px" :model="editBom" label-width="auto">
        <el-form-item style="font-weight: bold" label="BOM物料编码">
          <el-input v-model="editBom.bomMaterialCode" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold;" label="BOM物料名称">
          <el-input v-model="editBom.bomMaterialName" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="BOM物料规格">
          <el-input v-model="editBom.bomMaterialSpec" type="textarea" readonly/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="BOM物料单位">
          <el-select v-model="editBom.bomUnitCode" disabled/>
        </el-form-item>

        <el-form-item style="font-weight: bold;" label="物料使用比例">
          <el-input-number style="width: 220px" min="0" v-model="editBom.useScales" step="0.1"/>
        </el-form-item>

        <el-form-item style="font-weight: bold" label="备注">
          <el-input v-model="editBom.remark" type="textarea"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelEditBom">取消</el-button>
        <el-button type="primary" @click="editBomSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref,watch} from 'vue'
import bomRequest from "@/api/bom.js";
import {ElMessage} from "element-plus";

// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelBomEdit'])
// 弹窗标记
let bomEditWinDialogVisible = ref(false);

// 申明的属性
// bomId: 当前要编辑的BOM的编号
let props = defineProps(["bomId"]);
// 编辑的单位对象
let editBom = ref({})

/**
 * 取消编辑按钮事件
 */
function cancelEditBom(){
  // 将当前的编辑对象置空
  editBom = ref({});
  // 关闭窗体
  bomEditWinDialogVisible.value = false;
  // 触发暴漏出去的取消编辑的事件
  emits("cancelBomEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
  // 触发暴漏出去的取消编辑的事件
  emits("cancelBomEdit")
}

/**
 * 编辑提交
 */
function editBomSubmit(){
  bomRequest.updateBomById(editBom.value,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"编辑BOM成功"
      });
      // 关闭弹窗
      cancelEditBom();
      // 触发编辑完成的事件
      emits('editComplete',res.data);
    } else {
      ElMessage({
        type:"warning",
        message:"修改BOM失败"
      });
    }
  })
}

/**
 * 通过unitId加载任务信息
 * @param bomId
 */
function loadBomById(bomId){
  bomRequest.selectBomById(bomId,res=>{
    if(res.data){
      editBom.value = res.data;
      // 弹窗
      bomEditWinDialogVisible.value = true;
    }
  });
}

/**
 * 侦听器 侦听 props.bomId
 * // 每次属性 props.bomId 发生变化这里都会执行
 */
watch(()=>props.bomId,()=>{
  // 判断 bomId 是否是-1，如果是-1，说明是取消操作，不需要做任何操作。
  if(props.bomId != -1){
    // 如果不是-1 就加载要编辑的数据
    loadBomById(props.bomId);
  }
});
</script>
<style scoped>
</style>